<template>
  <div class="YLFormItem">
    <!-- 展示 label -->
    <label v-if="label"> {{ label }} </label>
    <!-- 显示内部元素 -->
    <slot></slot>
    <!-- 显示错误信息  -->
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>
<script>
import Schema from 'async-validator';
import emitter from '../../../mixins/emitter';

export default {
  mixins: [emitter],
  inject: ['form'],
  name: 'YLFormItem',
  componentName: 'YLFormItem',
  props: {
    label: { type: String, default: '' },
    // prop 可以理解成就是一个 key用来获取到父组件的值和校验规则
    prop: { type: String, default: '' },
  },
  data() {
    return {
      // error是这个组件自己的状态  label是用户主动设置的
      error: '',
    };
  },
  mounted() {
    this.$on('validate', () => {
      this.validate();
    });

    if (this.prop) {
      // 告诉 YLForm我来了 需要给我做校验
      this.dispatch('YLForm', 'yl.form.addField', [this]);
    }
  },
  methods: {
    validate() {
      // 当前表单项的校验
      // 获取校验规则和数据
      let value = this.form.model[this.prop];
      let rules = this.form.rules[this.prop];
      let schema = new Schema({ [this.prop]: rules });
      // 返回 promise  之后全局统一处理
      return schema.validate({ [this.prop]: value }, (errors) => {
        if (errors) {
          this.error = errors[0].message;
        } else {
          this.error = '';
        }
      });
    },
  },
};
</script>
<style scoped>
.error {
  color: red;
}
</style>
